<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="../css/layui.css" />
		<script type="text/javascript" src="../layui.js"></script>
	</head>
	<body>
		<script type="text/html" id="headToolBar">
			<button class="layui-btn layui-btn-sm" lay-event="createUser">
			<i class="layui-icon layui-icon-add-circle"></i>添加角色</button>
		</script>
		
		<script type="text/html" id="rowToolBar">
			<button class="layui-btn layui-btn-primary layui-btn-xs">
			    <i class="layui-icon layui-icon-set-fill"></i> 设置权限</button>
			<button class="layui-btn layui-btn-xs" lay-event="updateUser" >
			    <i class="layui-icon layui-icon-edit"></i> 编辑</button>
			<button class="layui-btn  layui-btn-danger layui-btn-xs" lay-event="deleteUser">
				<i class="layui-icon layui-icon-delete"></i> 删除</button>
		</script>
		
		<table class="layui-hide" id="testTable" lay-filter="test">
			
		</table>
		<script>
		layui.use(['layer','table'],function(){
			var layer=layui.layer,
			table=layui.table
			$=layui.$;
			var pData;
			table.render({//渲染
				elem:'#testTable',//根据id找表格
				height:400,
				toolbar:'#headToolBar',
				url:'http://stuapi.ysdjypt.com/api/GetRolesLayUI',
				method:'post',
				where:{'token':'23d66d84-fae1-45d5-bd07-b694662fe579'},//参数
				title:'用户表',
				page:true,//页
				cols:[
					[    
						{   field:'Int0',
							title:'序号',
							width:80
						},{
						   field:'Name',
							title:'用户名',
							width:150,
							sort:true
						},{
							title:'操作',
							toolbar:'#rowToolBar'
						}
					]
				],
				id:'testReload',
				done:function(res,curr,count){
					pData=res.data;
					}
			});
			
			$('#search').on('click',function(){
				var type=$(this).data('type');
				active[type]?active[type].call(this):'';
			});
			//顶部工具栏,toolbar 行内工具栏 tool
			table.on('toolbar(test)',function(data){
				switch (data.event){
					case 'createUser':
					    layer.msg("创建用户"); 
						break;
					default:
						break;
				}
			});
			
			table.on('tool(test)',function(res){
				switch (res.event){
					case 'updateUser':
					    layer.alert('您准备修改'+res.data.LoginName+'的信息');
						//打开弹框 编辑
						break;
					case 'deleteUser':
					    layer.alert('确定删除用户'+res.data.LoginName+'的信息吗？');
						//打开弹框 删除
						break;
					default:
						break;
				}
			});
		});
		</script>
	</body>
</html>
